<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="field"
      width="800px"
      top="5vh"
      @close="handleClose"
      custom-class="dialog-action-log"
    >
      <el-form
        ref="ruleForm"
        label-width="100px"
        class="dialog-ruleForm"
      >
        <el-form-item label="模块操作:"
          >{{ rowData.title }}/{{ formatBusinessType(rowData.businessType) }}
        </el-form-item>
        <el-form-item label="登录信息:"
          >{{ rowData.operName }}/{{ rowData.deptName }}
        </el-form-item>
        <el-form-item label="请求地址:">
          {{ rowData.operUrl }}
        </el-form-item>
        <el-form-item label="请求方式:">
          {{ rowData.requestMethod }}
        </el-form-item>
        <el-form-item label="操作方法:"> {{ rowData.method }} </el-form-item>
        <el-form-item label="请求参数:">
          <div class="pre-contain">
            <pre><code>{{ rowData.operParam }}</code></pre>
          </div></el-form-item
        >
        <el-form-item label="返回参数:">
          <div class="pre-contain">
            <pre><code>{{ rowData.jsonResult }}</code></pre>
          </div></el-form-item
        >
        <el-form-item label="状态:">
          <el-tag type="success">{{ formatStatus(rowData.status) }}</el-tag>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryDictText } from "@/api/systemmanagement";
export default {
  name: "actionLogDetail",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    field: {
      type: String,
      default: "",
    },
    rowData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    dictCache:{
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value; // 返回父组件通过 v-model 传递的值
      },
      set(val) {
        this.$emit("close", val); // 当 dialogVisible 变化时，通知父组件更新
      },
    },
  },
  methods: {
    handleClose() {
      this.dialogVisible = false; // 关闭弹窗
      this.$emit("close"); // 发送关闭事件给父组件
    },
   formatStatus(status) {
      // 检查 dictCache 是否存在且包含 sys_common_status
      if (this.dictCache && 
          this.dictCache["sys_common_status"] && 
          Array.isArray(this.dictCache["sys_common_status"])) {
        // 在字典数据中查找匹配项
        const matchedItem = this.dictCache["sys_common_status"].find(item => 
          item.dictValue == status
        );
        // 如果找到匹配项，返回标签文本
        if (matchedItem) {
          return matchedItem.dictLabel;
        }
      }
      // 如果没有找到匹配项或没有缓存，返回原始值
      return status;
    },
    // 格式化操作类型显示
    formatBusinessType(businessType) {
      // 检查 dictCache 是否存在且包含 sys_oper_type
      if (this.dictCache && 
          this.dictCache["sys_oper_type"] && 
          Array.isArray(this.dictCache["sys_oper_type"])) {
        // 在字典数据中查找匹配项
        const matchedItem = this.dictCache["sys_oper_type"].find(item => 
          item.dictValue == businessType
        );
        // 如果找到匹配项，返回标签文本
        if (matchedItem) {
          return matchedItem.dictLabel;
        }
      }
      // 如果没有找到匹配项或没有缓存，返回原始值
      return businessType;
    }
  },
};
</script>
<style lang="scss">
.dialog-action-log {
  .dialog-ruleForm {
    width: 90%;
    line-height: 60px;
    margin: 0 auto;
  }
  .el-dialog__body {
    max-height: 650px;
    overflow: auto;
  }
  .el-form-item__content {
    margin-left: 110px !important;
  }
  .pre-contain {
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 0 20px;
  }
}
</style>
